/* body{
    background-color: rgb(252, 238, 240);

    color:rgb(248, 147, 164);
} */

.main{
    margin-top:20px;

    display:flex;
    justify-content: space-around;
}

.left{
    width:60%;
}

.left > .infoBox{
    display:flex;
    justify-content: space-around;
}

.petName{
    text-align:center;
    font-size: 20px;
}

.petInfo{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
}

.petImg{
    width:300px;
    height: 300px;

    margin-right:10px;
}

.petImg img{
    width:100%;
    height: 100%;

    border:1px solid pink;
    border-radius: 5%;

}

.price_stock{
    height:100px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
}

.price_stock .stock, .price_stock .price{
    display: flex;
    justify-content: space-around;
}

.numberBox{
    display:flex;
    justify-content: space-around;
}

.opreation{
    display:flex;
    justify-content: space-around;
}


.add, .sub{
    padding:10px 20px 10px 20px;
    
    /* border:1px solid black; */

    background-color: rgb(235, 182, 10);
    color:black;

    margin:0 10px 0 10px;

    text-align:center;
    vertical-align: middle;
}

.number{
    border:1px solid rgb(235, 182, 10);
    ;
    color:black;
}

.number:focus{
    outline:rgb(243, 145, 16) solid 2px;
}

.car, .buy{
    padding:15px;
    background-color: rgb(255, 238, 192);
    color:white;
    border-radius: 5%;
}

.car{
    background-color: rgb(233, 165, 57);
}

.buy{
    background-color: rgb(233, 165, 57);
}

.petBox .pet{
    display:flex;
    justify-content:space-around;

    margin-bottom:20px;
}

.pet .info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width:150px;
}

.pet .info div{
    text-align:end;
}

.petBox .info{
    display:flex;
    flex-direction: column;
}

.info .name{
    color:rgb(0, 0, 0);
}

.info .price, .info .stock{
    display: flex;
    justify-content: space-around;
    color:rgb(0, 0, 0);
}

.petBox .image{
    width:150px;
    height:150px;
}

.petBox .image img{
    width: 100%;
    height: 100%;
}

.commentBox{
    margin-top:40px;
}

.userinfo{
    display:flex;

}

.commentBox .comment{
    margin-top:40px;

    border-bottom: 1px solid rgb(41, 40, 40);
}

.info .username{
    margin-bottom: 5px;
} 

.userinfo .content{
    margin:35px 0 10px 0;
}

.avatar{
    margin-right:20px;
    
}

.avatar img{
    width:50px;
    height:50px;

    border-radius: 50%;
}
